{% extends "dynamic/base.html" %}

{% load i18n adminmedia %}

{% block stylesheet %}{% admin_media_prefix %}css/dashboard.css{% endblock %}
{% block bodyclass %}change-list{% endblock %}
{% block coltype %}flex{% endblock %}

{% block extrahead %}{{ block.super }}

<style>
    div.shell {
        border: 1px solid #ccc;
        padding: 5px;
        font-family: courier new;
        font-size: 12pt;
    }

    div.output {
        overflow-x: scroll;
    }

    input#command {
        width: 90%;
        border: none;
        font-family: inherit;
        font-size: inherit;
        background-color: #eee;
    }

    form {
        margin: 0px;
    }

    table.rows {
        border: 1px solid #ccc;
        margin-bottom: 10px;
    }

    table.rows, div.error {
        margin-left: 40px;
    }

    table.rows tbody {
    }

    table.rows tr.row:hover {
        background-color: yellow;
    }

    div.out:hover {
        background-color: #ffc;
    }
</style>

<script>
    $(document).ready(function(){
        $('input#command').focus();
    });
</script>
{% endblock extrahead %}

{% block content %}
<div class="shell">
    <div class="output">
        {% for out in output %}
        <div class="out">
            <div class="cmd">
                &gt;&gt;&gt; {{ out.command }}
            </div>

            {% if out.rows %}
            <table class="rows">
                <tbody>
                {% for row in out.rows %}
                <tr class="row">
                    {% for col in row %}
                    {% if forloop.parentloop.counter0 %}<td>{% else %}<th>{% endif %}
                        {{ col }}
                    {% if forloop.parentloop.counter0 %}</td>{% else %}</th>{% endif %}
                    {% endfor %}
                </tr>
                {% endfor %}
                </tbody>
            </table>
            {% endif %}

            {% if out.error %}
            <div class="error">
                {% trans "Error" %}: {{ out.error }}
            </div>
            {% endif %}
            </div>
        {% endfor %}
    </div>

    <form method="post">
        &gt;&gt;&gt; <input id="command" name="command"/>
    </form>
</div>
{% endblock content %}

